<template>
  <div class="qa-container">
    <van-nav-bar class="qajzapp" fixed left-text="家政服务" slot="left">
    </van-nav-bar>
    <!-- 搜索栏 -->
    <div class="search">
      <van-search
        background="#354499"
        v-model="value"
        placeholder="智能匹配"
        @click="isshowhouse = true"
      />
      <span :value="columnsvalue" @click="isaddressshow = true">{{
        columnsvalue
      }}</span>
      <van-icon
        size="17"
        color="#FFFFFF"
        class="searchicon"
        :name="isaddressshow ? 'arrow-down' : 'play'"
      />
    </div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" class="qa-swipe">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 标签 -->
    <div class="qatab">
      <van-cell title="热门服务" class="qavancell" />
      <van-tag
        color="#a3a0a0"
        plain
        round
        v-for="(item, index) in serverLiset"
        :key="index"
        @click="nannyDetails(index)"
        :class="isActive == index && isActive !== false ? 'active' : ''"
        >{{ item }}</van-tag
      >
    </div>
    <!-- 优质公司 -->
    <div class="qalist">
      <div class="title">
        <h3><b>优质公司</b></h3>
        <h4>专业团队,保洁项目全,省事省心</h4>
      </div>
      <van-pull-refresh
        v-model="refreshing"
        @refresh="personneServers"
        :success-text="refreshSuccessText"
        success-duration="1200"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          @load="loadCompany"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
        >
          <company-item
            v-for="(item, index) in companyList"
            :key="index"
            :company="item"
          ></company-item>
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- 保洁案例 -->
    <div class="floor_4_main">
      <div class="title">
        <h3><b>保洁案例</b></h3>
        <h4>态度认真,就近安排,收费合理</h4>
      </div>
      <div class="caselist">
        <ul class="list">
          <li class="item">
            <figure>
              <img
                src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041GF515264.jpg"
                alt="开荒保洁案例"
              />
            </figure>
            <div class="txt fr">
              <h3>开荒保洁案例</h3>
              <p>
                规范的操作流程，创造温馨舒适的工作环境。
                1.准备工具：吸尘机、抹布、水桶、地拖、胶袋、清洁剂...
              </p>
              <span class="jia icon"></span>
            </div>
          </li>
          <li class="item">
            <figure>
              <img
                src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041GF332205.jpg"
                alt="外墙清洗案例"
              />
            </figure>
            <div class="txt fr">
              <h3>外墙清洗案例</h3>
              <p>
                1、作业施工人员应积极配合客户对施工质量的监督，接受客户的领导与检查。对不合格项目即时整改...
              </p>
            </div>
          </li>
          <li class="item">
            <figure>
              <img
                src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041GF252531.jpg"
                alt="单位保洁案例"
              />
            </figure>
            <div class="txt fr">
              <h3>单位保洁案例</h3>
              <p>
                服务项目：
                1、新房开荒保洁、工程开荒保洁、家庭装修后开荒保洁，写字楼、超市开荒清洁，公司全...
              </p>
            </div>
          </li>
          <li class="item">
            <figure>
              <img
                src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041GF14H09.jpg"
                alt="居家保洁案例"
              />
            </figure>
            <div class="txt fr">
              <h3>居家保洁案例</h3>
              <p>
                我们的服务保障
                一、诚信服务：我们的家政服务人员身份真实可信，来源可查。
                二、健康保证：持证...
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 保洁知识 -->
    <div class="floor_5_main">
      <div class="title">
        <h3><b>家政保洁知识</b></h3>
        <h4>提供家政清洁,家政服务,开荒保洁,单位保洁等全程一站式服务省事省心</h4>
      </div>
      <div class="textlist">
        <ul class="list">
          <li class="item clearfix">
            <div class="figure">
              <img
                src="http://www.jiazhengsm.com/uploads/allimg/201203/1-2012031AHA14-lp.png"
              />
            </div>
            <div class="txt fr">
              <h3>德意热水器灯亮不加热原因是什么/常用检</h3>
              <p>一、德意热水器灯亮不加热是怎么回事? 燃气通路有堵塞现象，...</p>
              <span class="jia icon"></span>
            </div>
            <van-icon name="star" color="#c0392b" />
          </li>
          <li class="item clearfix">
            <div class="figure">
              <img
                src="http://www.jiazhengsm.com/uploads/allimg/201203/1-2012031A042c0-lp.png"
              />
            </div>
            <div class="txt fr">
              <h3>德意燃气热水器不打火如何维修【原因与</h3>
              <p>一、德意燃气热水器不打火的原因与解决办法 1、电源问题，电...</p>
              <span class="jia icon"></span>
            </div>
            <van-icon name="star" color="#c0392b" />
          </li>
          <li class="item clearfix">
            <div class="figure">
              <img
                src="http://www.jiazhengsm.com/uploads/allimg/201203/1-201203164AC42-lp.png"
              />
            </div>
            <div class="txt fr">
              <h3>德意燃气热水器电磁阀坏了如何处理|电磁</h3>
              <p>德意燃气热水器电磁阀坏了如何处理 1、电池问题：若是用电池...</p>
              <span class="jia icon"></span>
            </div>
            <van-icon name="star" color="#c0392b" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 智能匹配弹框 -->
    <van-popup
      v-model="isshowhouse"
      position="bottom"
      :style="{ height: '90%' }"
    >
      <house-add></house-add>
    </van-popup>

    <!-- 地址弹出层 -->
    <van-popup v-model="isaddressshow" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
// 公司列表组件
import CompanyItem from '@/components/company-item'
// 获取公司列表的接口,职业类型
import { getCompany, getoccupation } from '@/api/home.js'
// 智能匹配组件
import houseAdd from './house-Add'

export default {
  name: 'HouseIndex',
  components: {
    CompanyItem,
    houseAdd
  },
  created () {
    // 初始化渲染
    this.loadCompany()
    this.personneServers()
  },
  watch: {
    columnsvalue (value) {
      window.localStorage.setItem('11', value)
    }
  },
  data () {
    return {
      value: '',
      isActive: false, // 高亮
      companyList: [], // 公司列表项
      finished: false,
      isshowhouse: false, // 控制智能组件的隐藏
      serverLiset: [], // 月嫂等职业类型
      isaddressshow: false, // 控制地标的弹层
      columnsvalue: window.localStorage.getItem('11') || '长沙',
      columns: ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德市', '张家界', '益阳', '其他'],
      images: [
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1227585021,3112650601&fm=11&gp=0.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606974882824&di=4406278237ec5810e8cb1b3b2c84dd46&imgtype=0&src=http%3A%2F%2Fstatic.fotor.com.cn%2Fassets%2Fprojects%2Fpages%2F4bd66ef8-0c01-4a1c-a5e3-e3c6f70734a3_d46c1e2d-5388-4496-beea-6e2c4d7f5c32_thumb.jpg',
        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2132149530,340009654&fm=11&gp=0.jpg'
      ],
      // 刷新
      loading: false,
      // 刷新状态
      refreshing: false,
      error: false,
      // 下拉刷新成功文本提示
      refreshSuccessText: '刷新成功!',
      finishedText: ''
    }
  },
  methods: {
    // 获取公司列表项
    async loadCompany () {
      this.loading = true
      try {
        const { data } = await getCompany()
        // console.log(data)
        this.companyList = data
        this.finished = true
      } catch (error) {
        this.$toast.fail('获取失败')
        this.error = true
      }
      this.Loading = false
    },
    // 月嫂tab项
    async personneServers () {
      try {
        this.finishedText = '数据加载中......'
        const res = await getoccupation()
        // console.log(res.data[0])
        this.serverLiset = res.data[0].tags
        this.refreshSuccessText = '刷新成功!'
        this.loading = false
        this.refreshing = false
        this.finishedText = '没有更多了'
      } catch (err) {
        this.$toast.fail('获取失败')
        this.refreshSuccessText = '刷新失败!'
        this.loading = false
        this.refreshing = false
      }
    },
    onConfirm (value) {
      this.columnsvalue = value
      this.isaddressshow = false
    },
    // 点击标签跳转到招聘页面
    nannyDetails (index) {
      this.isActive = index
      this.$router.push('/details')
    }
  }
}
</script>

<style lang="less" scoped>
.qa-container {
  background-color: #fff;
  .van-hairline--bottom::after {
    border: 0 !important;
  }
  .qajzapp {
    background-color: #354499;
    font-size: 32px;
    font-weight: bold;
    /deep/ .van-nav-bar__text {
      color: #ffffff;
    }
  }
  .van-search__content {
    margin-top: 30px;
  }
  /deep/ .search {
    display: flex;
    justify-self: center;
    align-items: center;
    background-color: #354499;
    width: 750px;
    height: 138px;
    margin-top: 56px;
    .van-search {
      width: 620px;
      height: 60px;
    }
    span {
      font-size: 28px;
      margin-top: 20px;
      color: #ffffff;
    }
    .searchicon {
      margin-top: 25px;
    }
  }
  // 轮播图
  .qa-swipe {
    height: 200px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  // 标签
  .qatab {
    background-color: #fff;
    .van-cell {
      font-size: 38px;
      font-weight: 700;
      color: #354499;
    }
    /deep/ .van-tag {
      text-align: center;
      font-size: 20px;
      padding: 10px 40px;
      margin-left: 20px;
    }
  }

  .qalist {
    background-color: #fff;
    .title {
      h3 {
        width: 100%;
        padding-bottom: 0.4rem;
        text-align: center;
        padding-top: 0.5rem;
        margin-top: -10px;
        position: relative;
        b {
          color: #009b4c;
          font-weight: bold;
        }
      }
      h4 {
        text-align: center;
        color: #333;
        font-size: 0.24rem;
        letter-spacing: 0.05rem;
        margin-top: -72px;
      }
    }
    .van-cell {
      font-size: 38px;
      font-weight: 700;
      color: #354499;
    }
  }
  .floor_4_main {
    .title {
      h3 {
        width: 100%;
        padding-bottom: 0.4rem;
        text-align: center;
        padding-top: 0.5rem;
        margin-top: -10px;
        position: relative;
        b {
          color: #009b4c;
          font-weight: bold;
        }
      }
      h4 {
        text-align: center;
        color: #333;
        font-size: 0.24rem;
        letter-spacing: 0.05rem;
        margin-top: -72px;
      }
    }
    .caselist {
      padding: 0 3%;
      margin-bottom: 150px;
      .item {
        width: 100%;
        display: block;
        margin-bottom: 0.35rem;
        display: flex;
        border: 1px solid #e5e5e5;
        h3 {
          font-size: 0.24rem;
          margin-left: -60px;
          margin-top: 50px;
          color: #009b4c;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        p {
          font-size: 0.2rem;
          margin-left: -30px;
          color: #737373;
        }
        figure {
          img {
            margin-left: -30px;
            width: 100%;
            height: 100%;
            min-height: 100%;
          }
        }
      }
    }
  }

  .floor_5_main {
    margin-top: -180px;
    margin-bottom: 70px;
    .title {
      width: 100%;
      padding-bottom: 0.4rem;
      text-align: center;
      padding-top: 0.5rem;
      position: relative;
      h3 {
        b {
          color: #009b4c;
          font-weight: bold;
        }
      }
      h4 {
        color: #333;
        font-size: 0.24rem;
        letter-spacing: 0.05rem;
      }
    }
    .textlist {
      width: 100%;
      margin: 0 auto;
      padding: 0 0 0.3rem;
      .list {
        padding: 0 2%;
        .item {
          margin-bottom: 26px;
          width: 100%;
          display: flex;
          border: 1px solid #e5e5e5;
          .figure {
            overflow: hidden;
            margin: 20px;
            img {
              width: 100%;
              height: 100%;
              display: block;
              box-sizing: border-box;
            }
          }
          .txt {
            width: 55%;
            h3 {
              font-size: 0.26rem;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              color: #009b4c;
            }
            p {
              font-size: 0.2rem;
              color: #999;
              height: 0.7rem;
            }
          }
          .van-icon {
            width: 30%;
            margin-top: 64px;
            margin-left: 12px;
          }
        }
      }
    }
  }
  .active {
    color: #3f51b5 !important;
  }
}
</style>
